<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,.4);
            /* 使用固定定位,以HTML为参照物,紧贴四个边,就能实现撑满全屏的效果 */
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt inventore necessitatibus tempora. Debitis
        magni, rerum. Ab accusantium consequatur, cupiditate dolorum eum iure nihil nisi perferendis praesentium quam
        reprehenderit repudiandae soluta.
    </div>
    <div>Ab alias aliquam animi assumenda culpa cum deserunt distinctio error et eveniet exercitationem expedita facere
        inventore libero maxime molestias, necessitatibus nesciunt nisi numquam, qui quo quos rerum unde voluptate,
        voluptatibus?
    </div>
    <div>Cum dolorum facere itaque maiores maxime necessitatibus officia quam voluptas. Deleniti error fugit labore quas
        voluptas? Commodi cupiditate deserunt ducimus, facilis ipsa iure natus officia provident quam, reprehenderit
        voluptate, voluptatem?
    </div>
    <div>Cum distinctio mollitia nam provident quos rem sequi tempora veniam voluptates? Dolores eaque facilis ipsa
        ipsam, maxime tempore unde voluptatem voluptatum? Amet architecto dolores ea eius, natus odio quae rerum?
    </div>
    <div>Consequatur corporis dolorem excepturi minima? Culpa dolorum est impedit. Architecto doloremque hic, illo iste
        non optio sit! Excepturi, fugiat fugit illum incidunt iure laboriosam nesciunt perspiciatis quisquam, rerum
        suscipit voluptatibus!
    </div>
    <div>Consectetur, consequatur cum debitis delectus excepturi exercitationem impedit libero nam necessitatibus neque
        nostrum odio odit optio quaerat quos sed sit ut? Eveniet, impedit ipsam molestiae odio officiis quae sed sit.
    </div>
    <div>Accusantium adipisci asperiores atque cumque ducimus expedita hic, illo laboriosam maiores maxime minus neque
        nostrum placeat quam quasi quo recusandae suscipit ut veniam voluptate. Amet dolore minus modi nam recusandae.
    </div>
    <div>Aspernatur laudantium maxime quia sit voluptatibus. Amet animi architecto atque dicta dolores eius excepturi
        ipsam ipsum nobis, pariatur quas, quia quibusdam recusandae veritatis voluptate. Doloremque necessitatibus
        officia qui tempora vero.
    </div>
    <div>Cumque eligendi, vel! Aliquam commodi facilis, fugit iste maxime perferendis, quae quis rerum tempore totam
        vel, voluptates. Aliquam delectus distinctio eos est iure maiores obcaecati rem repellat similique tenetur?
        Soluta!
    </div>
    <div>Adipisci alias cumque deserunt eius mollitia nesciunt non numquam quis quod voluptate. Aperiam cum cupiditate
        deserunt ea eaque, ex iusto laborum, maiores minima nemo nihil nobis odit perferendis quisquam, saepe?
    </div>
    <div>Aliquam aut cum, debitis delectus dolorem dolorum eos explicabo fuga id incidunt iure nulla obcaecati officia
        officiis pariatur porro possimus rerum temporibus veritatis voluptatem. Aliquam consectetur consequuntur eaque
        laudantium natus.
    </div>
    <div>Beatae cum deserunt earum impedit iure, necessitatibus quidem quisquam quod totam velit! Assumenda at itaque
        omnis sit sunt! A ab assumenda atque corporis dicta, ea facere fugit nesciunt officia veritatis!
    </div>
    <div>Distinctio expedita fugit itaque libero molestias, obcaecati officia quasi quis voluptatibus! Corporis
        distinctio eaque, expedita fugit ipsum magnam maiores, minus nisi, nobis numquam odio perferendis placeat quod
        quos repellendus saepe?
    </div>
    <div>A alias asperiores cupiditate debitis deserunt, ducimus esse eveniet fugiat ipsum itaque iure necessitatibus
        neque praesentium ratione reiciendis rerum suscipit tempore! Architecto, excepturi, laborum? Aliquam aperiam
        dolores ipsam reprehenderit veniam.
    </div>
    <div>Ab architecto aut beatae consequatur culpa dolores dolorum eligendi error est eum harum modi nihil numquam
        obcaecati, quaerat quis quod quos reiciendis, repudiandae sapiente, sit soluta suscipit veniam? Hic, vitae.
    </div>
    <div>Consequatur et, illo impedit incidunt odit pariatur tempore voluptatibus. Ab ad amet consectetur consequatur
        cupiditate deserunt, expedita facere maxime numquam perferendis repellendus, voluptates voluptatibus. Blanditiis
        debitis eligendi ex minima qui?
    </div>
    <div>Aliquam consequatur, cum, cumque dignissimos dolore dolores optio porro quia ratione rem voluptate, voluptatem
        voluptates. Consequuntur cumque enim expedita fuga libero maxime, non nostrum officiis porro praesentium
        repudiandae tenetur voluptas.
    </div>
    <div>Accusamus adipisci commodi consectetur corporis deleniti deserunt dicta error ex exercitationem explicabo harum
        ipsum iusto necessitatibus nemo nisi officia optio pariatur possimus quia, quis rem repellendus sed suscipit
        tenetur totam?
    </div>
    <div>Aspernatur distinctio dolore ea est eum exercitationem facere non quaerat, ullam vitae. Dolore ex fugit
        inventore mollitia, nisi obcaecati officia quod recusandae. Dolorum mollitia reprehenderit vero voluptatum?
        Aperiam autem, pariatur.
    </div>
    <div>Culpa eaque eos expedita fugit laboriosam laudantium magni porro, possimus quaerat sed sint soluta, tempore
        tenetur vero voluptates. A cum laborum, modi perspiciatis quae quo ullam. Commodi esse obcaecati quia?
    </div>
    <div>Accusamus accusantium, aspernatur, enim exercitationem facilis molestiae, non omnis quaerat rerum suscipit ut
        voluptate! Animi commodi consequuntur iusto laboriosam laborum nemo placeat quasi veritatis voluptates
        voluptatum? Exercitationem non porro qui?
    </div>
    <div>Amet animi atque cumque doloremque, hic inventore ipsum laborum minima nisi! Assumenda atque consectetur
        consequatur, dolorem, fuga in inventore laboriosam laborum magni minima necessitatibus sint sunt, voluptatibus!
        Consequuntur, delectus quisquam.
    </div>
    <div>Aliquam corporis delectus dolore eligendi in iste porro veritatis. Animi aspernatur corporis dicta enim error
        eveniet fugiat, minima non optio provident quae quaerat quidem quo rem, soluta totam ullam voluptatibus.
    </div>
    <div>Accusamus ad beatae deserunt dolore ea et fugit id impedit ipsum iste molestias nesciunt nulla, odit officia
        porro praesentium quasi qui quis repudiandae similique sit sunt ullam unde vero voluptas?
    </div>
    <div>Doloribus eligendi fugit minima natus nostrum optio similique unde. Iusto, nobis, quidem. Alias aut,
        consequatur corporis dignissimos doloremque enim est et exercitationem laborum magni modi numquam quae,
        quibusdam soluta voluptatem.
    </div>
    <div>Accusantium aperiam aut cupiditate error iure labore laborum libero quis, quod recusandae? Cumque debitis
        distinctio, doloribus facere fugit illum nihil recusandae saepe? Accusamus asperiores consectetur eligendi esse
        numquam quidem, repudiandae?
    </div>
    <div>Ad doloribus et natus officia pariatur praesentium quibusdam quis rem! Blanditiis consequatur dolore doloremque
        ducimus fugiat libero minima voluptate. Amet dolore eius esse, explicabo impedit ipsa magnam repellendus rerum
        saepe.
    </div>
    <div>Cum cumque eaque eveniet ex, expedita facere fugiat ipsam, molestiae nemo neque perspiciatis, reiciendis
        repellat totam! Cum illum in iure laboriosam, recusandae rerum sapiente sit ut voluptatem? Ex laboriosam,
        sapiente?
    </div>
    <div>Cupiditate error est ex fugit impedit incidunt ipsam laborum, libero nulla officiis optio quia saepe temporibus
        ut velit? Eius labore minima optio repellendus reprehenderit? Alias assumenda doloremque ducimus id voluptate.
    </div>
    <div>Aliquid animi debitis delectus deleniti, dolore dolores esse expedita illum ipsa magni maxime modi molestias
        neque nihil nobis numquam officiis optio perspiciatis quam quia reiciendis repudiandae suscipit ut vel vero?
    </div>
    <div>Animi aut dolorem error est eveniet fugit illum iste, iusto modi nam natus optio quibusdam saepe soluta totam
        veritatis voluptatem? Accusamus ad aliquam consequatur exercitationem nam neque quod soluta ut.
    </div>
    <div>Adipisci dolore doloremque esse ex in, laudantium minima quaerat rem sed unde! Aliquid corporis cumque est, ex,
        exercitationem facere id libero obcaecati provident, repudiandae totam vitae voluptatem voluptatibus. Error,
        laboriosam.
    </div>
    <div>Accusantium cupiditate dolorem error id quos repellat, repellendus? Accusamus blanditiis corporis debitis modi
        quisquam sequi sint, tempore ut velit voluptatem. At atque distinctio laboriosam necessitatibus nostrum quaerat
        quisquam? Est, saepe.
    </div>
    <div>Ea esse excepturi id ipsa ipsum laboriosam modi provident quis sed voluptatibus! Ad atque consectetur
        consequuntur fugit hic in, iste minima mollitia nostrum omnis perferendis, quis quisquam repellendus sapiente
        soluta?
    </div>
    <div>Aliquam aperiam commodi consectetur, cum, dolore expedita maxime nulla odit omnis quasi quisquam reprehenderit,
        sunt tempora tempore veritatis. Ad culpa cumque cupiditate dolore dolorem enim excepturi explicabo incidunt
        laudantium quasi!
    </div>
    <div>Ad consequuntur debitis deleniti distinctio dolorem earum facilis fugiat illo libero maxime non obcaecati odio
        officiis quae quisquam recusandae, rerum unde voluptatem? At culpa hic mollitia officiis omnis qui quos.
    </div>
    <div>Iure laboriosam natus optio quaerat quod recusandae sequi veritatis vitae. Asperiores at debitis dolor eum
        eveniet ipsa iste, necessitatibus nulla officiis placeat porro quae qui recusandae saepe similique sunt
        voluptatem!
    </div>
    <div>Error ex facilis impedit ipsam repellendus rerum voluptatibus? Accusamus asperiores eaque inventore laboriosam
        nulla qui quos tempora temporibus totam, velit. Animi consequuntur ex labore laudantium odit optio repellendus
        saepe sint!
    </div>
    <div>Eum quasi quisquam reprehenderit, repudiandae sint temporibus ut. Aliquam aliquid animi aperiam culpa id iure
        labore molestias mollitia, nesciunt nisi provident reiciendis sapiente soluta sunt totam? Alias dolor doloremque
        voluptatem?
    </div>
    <div>Accusamus, ad aliquid assumenda atque blanditiis cum, debitis deleniti dignissimos earum error fuga hic id ipsa
        iure libero magni odit officiis quis repellendus reprehenderit sint temporibus tenetur, vitae voluptates
        voluptatibus.
    </div>
    <div>Accusantium ad adipisci architecto blanditiis commodi cum dicta dolorum ea eum, eveniet id incidunt
        necessitatibus nostrum numquam odit perferendis repellendus, sed similique sunt temporibus tenetur ut veniam
        vero. Optio, perferendis.
    </div>
    <div>Asperiores aut consequuntur cumque deleniti dignissimos dolorem, pariatur praesentium quibusdam quisquam quo
        ut, voluptate. Accusamus commodi cupiditate debitis dolores doloribus fugit, itaque iusto odio porro quaerat
        quisquam reiciendis reprehenderit similique!
    </div>
    <div>A accusantium alias aliquam assumenda consectetur culpa deleniti distinctio dolores eaque expedita explicabo
        ipsum magnam molestiae nulla numquam perferendis praesentium quam ratione reiciendis repellat repellendus
        sapiente similique suscipit vel, voluptatem.
    </div>
    <div>Eius, illum, iusto. Aliquam consequatur culpa ex facere id in iure molestiae mollitia natus, odit praesentium
        quae quisquam rerum tempora vero? Dolores expedita explicabo necessitatibus nostrum obcaecati omnis reiciendis
        tenetur.
    </div>
    <div>Ab ad alias aut autem beatae corporis cumque ea excepturi impedit iste laudantium magni pariatur perspiciatis,
        quidem reiciendis sint velit. Dolor eius libero necessitatibus quia ratione repudiandae. Eaque excepturi, illo.
    </div>
    <div>Ex fugiat maxime mollitia quia! Animi aut cupiditate excepturi illo modi omnis quam quisquam sint. Amet animi
        consectetur dignissimos distinctio laboriosam! Asperiores aspernatur autem facere fugit laudantium, repudiandae
        sapiente suscipit.
    </div>
    <div>Cumque dolorem dolores error, et laudantium obcaecati odio quidem, reiciendis sed soluta voluptates
        voluptatibus. Alias animi dolorum expedita harum hic mollitia nostrum, odit porro quas unde voluptas, voluptate?
        Natus, tempore!
    </div>
    <div>Blanditiis dolorem, dolorum in ipsa iusto laudantium omnis sint tempora veritatis! Blanditiis dolores dolorum
        ea inventore magnam nobis praesentium, recusandae reprehenderit sapiente suscipit? Dolore ducimus, eaque
        exercitationem nemo nisi perferendis?
    </div>
    <div>Ipsa, repudiandae saepe. Ab aliquam architecto, at aut distinctio dolorem ducimus enim eos eum hic in,
        inventore ipsum natus nostrum quasi quia quo ratione rem reprehenderit sint velit vero vitae!
    </div>
    <div>Ad aliquam blanditiis cumque ea eaque est fugiat id illo, ipsa labore minima natus nihil, officiis quia totam.
        Adipisci amet consequuntur doloribus ea error id laboriosam minima odio rem vel.
    </div>
    <div>Assumenda blanditiis, cum debitis dolores ducimus earum eos excepturi explicabo id laboriosam libero maiores
        neque non nostrum quasi quibusdam ratione reiciendis repellat sed, suscipit unde vero vitae! Ducimus natus, rem.
    </div>
    <div>Aperiam consequuntur doloremque facere illum incidunt, magnam maiores molestias nam nemo odit quas quidem quod
        rerum sequi sit soluta suscipit tempora totam ut vitae. Deleniti ea est illo nemo quam.
    </div>
    <div>A accusamus, aliquam aliquid architecto deleniti deserunt doloremque eveniet excepturi fugiat harum ipsam,
        maiores maxime minima nostrum odio perspiciatis porro quasi reiciendis similique temporibus totam vitae voluptas
        voluptatum. Et, obcaecati?
    </div>
    <div>Aut, eveniet nemo? Aperiam architecto atque beatae cupiditate deleniti dignissimos distinctio earum eveniet
        facere in inventore minus nisi perferendis, perspiciatis possimus quaerat quas reiciendis similique suscipit
        tempora totam ullam voluptates.
    </div>
    <div>Corporis eligendi eos et facere in incidunt iure labore molestiae nihil nisi non, placeat quae quis ratione
        sequi vero voluptatibus! Ad commodi dolor illo iusto magnam porro quasi recusandae, tempora?
    </div>
    <div>A, asperiores cumque debitis eligendi eveniet exercitationem illo impedit in molestiae nulla optio quam,
        quibusdam soluta, tenetur voluptas? Architecto aspernatur eligendi et ex fuga, iste magnam optio possimus
        ratione ut!
    </div>
    <div>Accusantium aut blanditiis consequatur, dolore eaque excepturi expedita in ipsa ipsam maxime nemo nihil numquam
        quaerat quos ratione rem repudiandae sint suscipit, vitae voluptatem? Ad, sint, veniam! Consequatur dolorum,
        necessitatibus?
    </div>
    <div>Ab ad aliquam doloremque eaque esse et eveniet ex, harum maxime nulla possimus praesentium quasi quos
        repudiandae, rerum sequi, suscipit totam voluptas! Consequuntur cupiditate ipsam magni natus porro rerum totam!
    </div>
    <div>Accusamus animi atque aut consequatur dolore eaque, earum ipsa ipsum, labore minima nihil nulla perferendis
        quisquam repudiandae similique vel veniam? Alias beatae dolore exercitationem id iusto numquam, porro
        repudiandae voluptatibus!
    </div>
    <div>Ab ad, dicta dolor ipsum mollitia nemo perspiciatis quisquam voluptas? Atque distinctio dolore, ducimus earum
        eius error, est iusto molestiae mollitia neque nisi quae quam rem repellendus saepe ullam ut!
    </div>
</div>
</body>
</html>